<template>
  <ScalablePage>
    <div class="right">
      <!-- <img src="../assets/yxjc/tr1.png" alt="" style="width: 100%" /> -->
      <div class="screen-title-container-l1">
        <img src="../assets/yxjc/tr1.png" alt="" style="width: 100%" />
        <div class="screen-title-text-l1">更多</div>
      </div>
      <div class="bengzu">
        <div class="begnzu-ls">
          <img src="../assets/yxjc/r1.png" alt="" class="bengzu-img" />
          <div>
            <img src="../assets/yxjc/b1.png" alt="" />
            <p>{{ tatal }} m3</p>
          </div>
        </div>

        <div class="begnzu-ls">
          <img src="../assets/yxjc/r2.png" alt="" class="bengzu-img" />
          <div>
            <img src="../assets/yxjc/b2.png" alt="" />
            <p :style="{ color: Number(chushui) > 9000 ? 'red' : '' }">{{ chushui }} m3</p>
          </div>
        </div>

        <div class="begnzu-ls">
          <img src="../assets/yxjc/r3.png" alt="" class="bengzu-img" />
          <div>
            <img src="../assets/yxjc/b3.png" alt="" />
            <p>{{ bengzu.yali }}</p>
          </div>
        </div>

        <div class="begnzu-ls">
          <img src="../assets/yxjc/r4.png" alt="" class="bengzu-img" />
          <div>
            <img src="../assets/yxjc/b4.png" alt="" />
            <p>{{ bengzu.gongkuang }}</p>
          </div>
        </div>
      </div>
      <!-- <img src="../assets/yxjc/tr2.png" alt="" style="width: 100%;" /> -->
      <div class="screen-title-container-l1">
        <img src="../assets/yxjc/tr2.png" alt="" style="width: 100%;" />
        <div class="screen-title-text-l1">更多</div>
      </div>
      <div class="haoneng">
        <div>
          <span>{{ nenghao.xname[0] }}单耗：</span>
          <span class="haoneng-txt">{{ nenghao.data[0] }}kw/h</span>
        </div>
        <div>
          <span>{{ nenghao.xname[1] }}单耗：</span>
          <span class="haoneng-txt">{{ nenghao.data[1] }}kw/h</span>
        </div>
      </div>
      <div class="echarts-hn" id="hnCharts"></div>
      <!-- <img src="../assets/yxjc/tr3.png" alt="" style="width: 100%;" /> -->
      <div class="screen-title-container-l1">
        <img src="../assets/yxjc/tr3.png" alt="" style="width: 100%;" />
        <div class="screen-title-text-l1">更多</div>
      </div>
      <ul class="yaoji">
        <li>
          <h4>90H</h4>
          <p>PAM</p>
        </li>
        <li>
          <h4 :style="{ color: Number(shengyuList.pac) < 3 ? 'red' : '' }">{{ shengyuList.pac }}H</h4>
          <p>PAC</p>
        </li>
        <li>
          <h4>55H</h4>
          <p>KMnO₄</p>
        </li>
        <li>
          <h4 :style="{ color: Number(shengyuList.pac) < 3 ? 'red' : '' }">{{ shengyuList.naclo }}H</h4>
          <p>NaClO</p>
        </li>
      </ul>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue";
import useBarChart from "@/myEcharts/useBarEcharts";
import { onMounted, reactive, ref, toRefs } from "vue";
import { waterApi, getJinshuiAPI, getZhuKongDianAPI, getGongKuangAPI, getNengHaoAPI, getWaterSupplyAPI, getNaCloAPI } from "@/utils/shuiwu/api";
import { getCurrentDateFormatted, getPreviousDay, formatCurrentDateTime, formatCurrentDateTimeNew } from "@/utils/date"
const tatal = ref(0);
const chushui = ref(0);

const state = reactive({
  shengyuList: {
    pac: '0',
    naclo: "0"
  },
  bengzu: {
    yali: 0,
    gongkuang: ''
  },
  nenghao: {
    xname: [],
    data: []
  }
})
const { shengyuList, bengzu, nenghao } = toRefs(state)

const { barSolidlist } = useBarChart();

onMounted(() => {
  // getBengZu(634);
  // getChuShui(642);
  // barSolidlist(
  //   "hnCharts",
  //   [
  //     "转子泵坑",
  //     "加压泵站",
  //     "输水塔",
  //     "泵后流量控制室",
  //     "配水井",
  //     "沉淀池",
  //     "翻板滤池",
  //     "送水泵房",
  //     "次氯酸钠间",
  //     "加药间",
  //     "绿化泵站",
  //     "中控室",
  //   ],
  //   "",
  //   "单位：kw/h",
  //   [10, 30, 12, 40, 25, 8, 33, 12, 40, 25, 8, 33]
  // );


  getJinshui()

  getChushui()
  getPAC()

  getNaClo()

  getZhuKongDian()
  getGongKuang()
  getNengHao()

});



function getJinshui() {
  getJinshuiAPI(1).then(res => {
    tatal.value = Number(res.data.value)
  })
}

function getChushui() {
  getJinshuiAPI(6).then(res => {
    chushui.value = Number(res.data.value)
  })
}


// 获取主控点压力
function getZhuKongDian() {
  getZhuKongDianAPI().then(res => {
    state.bengzu.yali = res.data[0].value
  })
  // console.log(formatCurrentDateTime())
  // let reg = { indexCode: 'yl_zkdyl_avg-day-' + formatCurrentDateTime() }
  // fetch(`http://100.66.1.2:8090/info/getIndexVal?${new URLSearchParams(reg).toString()}`)
  //   .then((r) => {
  //     if (r.status === 200) {
  //       return r.json();
  //     } else {
  //       return Promise.reject(r.json());
  //     }
  //   })
  //   .then((res) => {
  //   console.log(res, '主控点压力');
  // });
}

// 获取工况
function getGongKuang() {
  getGongKuangAPI().then(res => {
    state.bengzu.gongkuang = parseInt(res.data[0].value)
  })
}

// 获取能耗统计

function getNengHao() {
  getNengHaoAPI().then(res => {
    console.log(res);
    
    for (let i = 0; i < res.data.length; i++) {
      state.nenghao.data.push(res.data[i].value)
      let str = res.data[i].key.split('-')[0]
      state.nenghao.xname.push(str)
    }
    barSolidlist(
      "hnCharts",
      state.nenghao.xname,
      "",
      "单位：kw/h",
      state.nenghao.data
    );
  })

// console.log(formatCurrentDateTimeNew());

//   let reg = { indexCode: 'xl_sbxl_ddh-day-' + formatCurrentDateTimeNew() }
//   fetch(`http://100.66.1.2:8090/info/getIndexVal?${new URLSearchParams(reg).toString()}`)
//     .then((r) => {
//       if (r.status === 200) {
//         return r.json();
//       } else {
//         return Promise.reject(r.json());
//       }
//     })
//     .then((res) => {
//     console.log(res, '能耗统计2222');
//     for (let i = 0; i < res.data.length; i++) {
//         state.nenghao.data.push(res.data[i].IndexVal)
//         let str = res.data[i].IndexCode.split('-')[0]
//         state.nenghao.xname.push(str)
//       }

//       barSolidlist(
//         "hnCharts",
//         state.nenghao.xname,
//         "",
//         "单位：kw/h",
//         state.nenghao.data
//       );
//     });
}

// 获取pac药剂剩余时长
function getPAC() {
  getWaterSupplyAPI().then(res => {
    state.shengyuList.pac = res.data[0].value
  })
}

// 获取次氯酸钠药剂剩余时长


function getNaClo() {
  getNaCloAPI().then(res => {
    state.shengyuList.naclo = res.data[0].value
  })
  // let reg = { queryDay: getCurrentDateFormatted() }
  // fetch(`http://192.168.254.34:8090/getRealtimeData/selectNACIORemainingDuration?${new URLSearchParams(reg).toString()}`)
  //   .then((r) => {
  //     if (r.status === 200) {
  //       return r.json();
  //     } else {
  //       return Promise.reject(r.json());
  //     }
  //   })
  //   .then((res) => {
  //     state.shengyuList.naclo = res.data[0].value
  //   });
}



function getChuShui(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let total = 0;
    for (let i = 0; i < arr.length; i++) {
      if (
        arr[i].modelId == 4631 ||
        arr[i].modelId == 4633 ||
        arr[i].modelId == 4634 ||
        arr[i].modelId == 4636 ||
        arr[i].modelId == 4637 ||
        arr[i].modelId == 4638 ||
        arr[i].modelId == 4639 ||
        arr[i].modelId == 4640
      ) {
        total += Number(arr[i].value);
      }
    }
    chushui.value = total;
  });
}

function getBengZu(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let total = 0;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4387 || arr[i].modelId == 4388) {
        total += Number(arr[i].value);
      }
    }
    tatal.value = total;
  });
}
</script>

<style scoped>
.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.bengzu {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px 0px;

  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 28px;
  /* color: #ffeda8; */
  color: #ffffff;
  line-height: 33px;
  text-align: left;
  font-style: normal;
  margin-bottom: 40px;
}

.bengzu .begnzu-ls {
  display: flex;
}

.bengzu-img {
  width: 90px;
  height: auto;
}

.bengzu>div:nth-child(1) {
  /* background: url(../assets/yxjc/r1.png) no-repeat left top; */
}

.bengzu>div:nth-child(2) {
  /* background: url(../assets/yxjc/r2.png) no-repeat left top; */
}

.bengzu>div:nth-child(3) {
  /* background: url(../assets/yxjc/r3.png) no-repeat left top; */
}

.bengzu>div:nth-child(4) {
  /* background: url(../assets/yxjc/r4.png) no-repeat left top; */
}

.haoneng {
  display: flex;
  justify-content: space-between;
  width: 454px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
  line-height: 15px;
  text-align: left;
  font-style: normal;
  margin-top: 41px;
}

.haoneng>div {
  width: 208px;
  height: 69px;
  padding-left: 49px;
  padding-top: 23px;
}

.haoneng>div:nth-child(1) {
  background: url(../assets/yxjc/haonengbg1.png) no-repeat left top;
}

.haoneng>div:nth-child(2) {
  background: url(../assets/yxjc/haonengbg2.png) no-repeat left top;
}

.haoneng .haoneng-txt {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #3cfdff;
  line-height: 18px;
  text-align: left;
  font-style: normal;
}

.echarts-hn {
  height: 273px;
  margin-top: 22px;
  margin-bottom: 26px;
}

.yaoji {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 21px;
  text-align: center;
  font-style: normal;
}

.yaoji>li {
  width: 66px;
  padding-bottom: 45px;
}

.yaoji>li:nth-child(1) {
  background: url(../assets/yxjc/yj1.png) no-repeat left bottom;
}

.yaoji>li:nth-child(2) {
  background: url(../assets/yxjc/yj2.png) no-repeat left bottom;
}

.yaoji>li:nth-child(3) {
  background: url(../assets/yxjc/yj3.png) no-repeat left bottom;
}

.yaoji>li:nth-child(4) {
  background: url(../assets/yxjc/yj4.png) no-repeat left bottom;
}

.yaoji>li>h4 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  line-height: 26px;
  text-align: center;
  font-style: normal;
}
</style>
